@charset "utf-8";
@import "reset";
@import "utils";
@import "comon";
body {
    overflow: hidden;
}

.index-web {
    width: 100%;
    height: 100%;
    background: url(../img/diwen.png) center no-repeat #bf0c21;
    position: relative;
    .dh {
        animation: bofang 2s linear both infinite;
    }
    .img2 {
        display: none;
    }
    .kaig {
        display: block;
    }
    .zanting {
        position: absolute;
        top: r(15);
        right: r(20);
        width: r(40);
        height: r(40);
        overflow: hidden;
        img {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    .text {
        width: r(390);
        position: absolute;
        top: 47%;
        left: 50%;
        transform: translate(-50%, -50%);
        .logo {
            width: r(230);
            height: r(48);
            margin: 0 auto;
            @include aImg;
            animation: logodh 5s both;
        }
        .section {
            margin-top: r(30);
            text-align: center;
            font-size: r(90);
            width: r(390);
            height: r(241);
            color: #e7c598;
            ul {
                height: r(110);
                li {
                    float: left;
                    width: r(88);
                    height: r(91);
                    img{
                        width: 100%;
                    }
                }
                li:not(:last-child){
                    margin-right: r(12);
                }
            }
        }
        .free {
            margin-top: r(30);
            letter-spacing: r(5);
        }
        .customization {
            margin-top: r(50);
            letter-spacing: r(5);
        }
    }
}

//弹框-查看活动规则
.active {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(123, 2, 7, 0.8);
    display: none;
    .view {
        width: r(413);
        height: r(168);
        background: #e7c598;
        border-radius: 5px;
        font-size: r(20);
        color: #bf0c21;
        text-align: center;
        padding: r(40) 0 r(40) 0;
        @include abCenter;
        .cha-img {
            width: r(38);
            height: r(38);
            position: absolute;
            top: r(10);
            right: r(18);
            overflow: hidden;
            img {
                position: absolute;
                width: 100%;
                top: -9999px;
                bottom: -9999px;
                left: -9999px;
                right: -9999px;
                margin: auto;
            }
        }
        p {
            line-height: r(36);
        }
        .rules {
            display: inline-block;
            width: r(197);
            height: r(40);
            line-height: r(40);
            background: #bf0c21;
            color: #e7c598;
            border-radius: 5px;
            margin-top: r(20);
        }
    }
}